<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>单词列表</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/base.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin/iconfont.css">
		<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
		
		<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css">

	</head>

	<body>
		<jsp:include page="/WEB-INF/jsp/user/top.jsp"></jsp:include>
		<div style="height: 60px"></div>
		<div class="cBody">
			<div style="height: 15px;"></div>
			<div class="col-lg-2" style="margin-bottom: 30px;">
				<form action="${pageContext.request.contextPath}/Word/userSelectStarByNameLike" method="post">
					<div class="input-group">
						<input type="text" name="wordName" class="form-control" autocomplete="off" placeholder="搜索...">
						<span class="input-group-btn">
							<button class="btn btn-warning" type="submit">查询</button>
						</span>
					</div>
				</form>
			</div>
			<table class="table table-striped table-bordered table-hover" style="table-layout:fixed;">
				<tr>
					<th width="10%">释义</th>
					<th width="10%">平假名</th>
					<th width="10%">片假名</th>
					<th width="10%">单用汉字</th>
					<th width="10%">词性</th>
					<th width="10%">词汇等级</th>
					<th width="30%">备注</th>
					<th width="10%" class="text-center">操作</th>
				</tr>
				<tbody id="dataShow">
					<c:forEach items="${wordsAdmin}" var="word">
						<tr>
							<td>${word.wordChinese}</td>
							<td>${word.wordPing}</td>
							<td>${word.wordPian}</td>
							<td>${word.wordWord}</td>
							<td>${word.wordSex.wordSexName}</td>
							<td>${word.grade.gradeName}</td>
							<td>${word.wordContend}</td>
							<td class="text-center">
								<a href="${pageContext.request.contextPath}/StarWord/deleteOfStarPage?word.wordId=${word.wordId}&user.userId=${loginUser.userId}"><button class="btn btn-danger">取消收藏</button></a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<!-- layUI 分页模块 -->
			<div id="pages"></div>
			<div style="display: none;">
				<% int count = 0; %>
				<c:forEach items="${realWordsAdmin}">
					<% count++; %>
				</c:forEach>
				<span id="count"><%= count %></span>
			</div>
			<script>
				layui.use(['laypage', 'layer'], function() {
					var laypage = layui.laypage,
						layer = layui.layer;
					var allCount = $('#count').text();
				
					//总页数大于页码总数
					laypage.render({
					    elem: 'pages'
					    ,count: allCount
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
					    ,jump: function(obj){
					      console.log(obj)
					    }
					});
				});
			</script>
		</div>
		<script src="${pageContext.request.contextPath}/js/user/wordList.js"></script>
	</body>

</html>